<template>  
  <view class="container">   
    <image class="bg-image" src="/static/image.jpg" mode="aspectFill"></image>
    
    <view class="content">
      <image class="logo" src="/static/picture.png" mode="aspectFit"></image>
      
      <view class="button-group">
        <button class="login-button" @click="setLoginType">登录</button>  
        <button class="login-button" @click="gotoPhoneRegister">注册</button>  
      </view>
  <!--  <view class="bottom-content">
      <view class="register-text">
        <text>还没有账号？快去</text>
        <text class="register-link" @click="gotoPhoneRegister">注册</text>
      </view> -->
        
        <view class="agreement-section">  
          <checkbox-group @change="handleAgreeChange">
            <label class="agreement-label">
              <checkbox value="agree"  class="checkbox" />   
              <text class="agreement-text">登录代表你已阅读
                <text class="link" @click.stop="showAgreement('user')">《用户协议》</text>
                和
                <text class="link" @click.stop="showAgreement('privacy')">《隐私政策》</text>
              </text>
            </label>
          </checkbox-group>
        </view>
      </view>
    </view>
 <!-- </view> -->

  <view class="popup-mask" v-if="showPopup" @click="closePopup"></view>
  <view class="popup" v-if="showPopup">
    <view class="popup-header">
      <text class="popup-title">{{ popupTitle }}</text>
      <view class="popup-close" @click="closePopup">×</view>
    </view>
    <scroll-view class="popup-content" scroll-y>
      <view class="popup-text" v-if="agreementType === 'user'">
        <view class="section">
          <view class="section-title">1. 总则</view>
          <view class="section-content">
            1.1 用户应当同意本协议的条款并按照页面上的提示完成全部的注册程序。
			<br>
            1.2 用户在注册过程中须提供真实、准确的个人资料，且及时更新。
          </view>
        </view>
      </view>
      <view class="popup-text" v-else>
        <view class="section">
          <view class="section-title">1. 隐私保护方针</view>
          <view class="section-content">
            1.1 我们致力于保护您的个人隐私，承诺对您的个人信息进行保护。
			<br>
            1.2 我们将按照本隐私政策收集和使用您的个人信息。
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>  

<script>  
import { login, me, user_wordbooks, records } from '@/api/user.js'

export default {  
  data() {  
    return {  
      agree: false,  
      loginType: '',
      showPopup: false,
      agreementType: 'user',
      popupTitle: '用户协议'
    };  
  },  
  methods: {  
     async handleLogin() {  
       try {  
         // 1. 登录获取token  
         const loginRes = await login({  
           username: this.username,  
           password: this.password  
         })  
  
         if (loginRes.code === '2000') {  
           // 保存token  
           uni.setStorageSync('token', loginRes.data.token)  
           
           // 2. 获取并保存用户信息  
           const userInfoRes = await me()  
           if (userInfoRes.code === '2000') {  
             uni.setStorageSync('userInfo', userInfoRes.data)  
           }  
  
           // 3. 获取并保存用户单词本  
           const wordbooksRes = await user_wordbooks()  
           if (wordbooksRes.code === '2000') {  
             uni.setStorageSync('userWordbooks', wordbooksRes.data)  
           }  
  
           // 4. 获取并保存学习记录  
           const recordsRes = await records()  
           if (recordsRes.code === '2000') {  
             uni.setStorageSync('learningRecords', recordsRes.data)  
           }  
  
           // 显示成功提示  
           uni.showToast({  
             title: '登录成功',  
             icon: 'success'  
           })  
  
           // 延迟跳转，让用户看到成功提示  
           setTimeout(() => {  
             uni.switchTab({  
               url: '/pages/home/home'  
             })  
           }, 1500)  
         } else {  
           uni.showToast({  
             title: loginRes.message || '登录失败',  
             icon: 'none'  
           })  
         }  
       } catch (error) {  
         console.error('登录失败：', error)  
         uni.showToast({  
           title: '登录失败，请重试',  
           icon: 'none'  
         })  
       }  
     },  
     setLoginType() {  
      console.log('Current agree value:', this.agree); // 用于调试
      if (!this.agree) {  
        uni.showToast({  
          title: '请阅读并同意《用户协议》和《隐私政策》',  
          icon: 'none',
          duration: 2000
        });  
        return;
      }  
     
        this.gotoAccountLogin();  
      
     },  
   
     gotoAccountLogin() {  
       uni.navigateTo({  
         url: '/pages/login/accountLogin/accountLogin'  
       });  
     },  
     gotoPhoneRegister() {  
       uni.navigateTo({  
         url: '/pages/login/register/register'  
       });  
     },  
     showAgreement(type) {
       this.agreementType = type;
       this.popupTitle = type === 'user' ? '用户协议' : '隐私政策';
       this.showPopup = true;
     },
     closePopup() {
       this.showPopup = false;
     },
     handleAgreeChange(e) {
       this.agree = e.detail.value.length > 0;
       console.log('Checkbox value changed:', this.agree);
     },
     // 添加清除缓存的方法
     clearStorageData() {
       try {
         uni.removeStorageSync('token')
         uni.removeStorageSync('userInfo')
         uni.removeStorageSync('userWordbooks')
         uni.removeStorageSync('learningRecords')
       } catch (error) {
         console.error('清除缓存失败：', error)
       }
     }
  },  
  // 页面加载时清除旧数据  
  onLoad() {  
    this.clearStorageData()  
  }  
};  
</script>  

<style>
/* 重置默认样式 */
page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

.bg-image {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  height: 90%;
}

.logo {
  width: 200px;
  height: 200px;
 
  margin-bottom: 300px;
}

.logo:hover {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 40px;
}

.login-button {
  width: 300px;
  height: 50px;
  line-height: 50px;
  background: rgba(107, 75, 138, 0.8);
  color: white;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(107, 75, 138, 0.2);
  backdrop-filter: blur(5px);
}
/* 
.bottom-content {
  margin-bottom: 30px;
}

.register-text {
  text-align: center;
  font-size: 16px;
  margin-bottom: 15px;
}

.register-link {
  color: #6B4B8A;
  font-weight: 500;
} */

.agreement-section {
  display: flex;
  justify-content: center;
}

.agreement-label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.checkbox {
  transform: scale(0.8);
}

.agreement-text {
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.link {
  color: #6B4B8A;
  font-weight: 500;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: fadeIn 0.3s ease;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-height: 70vh;
  background: linear-gradient(to bottom, #fff, #f8f8f8);
  border-radius: 12px;
  z-index: 1000;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #fff;
  border-bottom: 1px solid rgba(107, 75, 138, 0.1);
}

.popup-title {
  font-size: 16px;
  font-weight: 500;
  color: #6B4B8A;
}

.popup-close {
  font-size: 24px;
  color: #6B4B8A;
  padding: 0 10px;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.popup-close:active {
  opacity: 1;
}

.popup-content {
  padding: 20px;
  max-height: calc(70vh - 60px);
  background: rgba(255, 255, 255, 0.9);
}

.section {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(107, 75, 138, 0.08);
}

.section-title {
  font-size: 15px;
  font-weight: 500;
  color: #6B4B8A;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(107, 75, 138, 0.1);
}

.section-content {
  font-size: 13px;
  color: #666;
  line-height: 1.8;
}

/* 添加动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translate(-50%, -45%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}
</style>